大家好，今天做的頁面用到比較不一樣的有GridView.count、BoxShadow

類似影片頁面

使用GridView.count，crossAxisCount設定項目橫向數量為3，
childAspectRatio可以設定子Widget比例，
crossAxisSpacing、mainAxisSpacing分別是橫縱的項目間隔

Widget _buildRelatedSeries() {
    return GridView.count(
      shrinkWrap: true,
      primary: false,
      padding: const EdgeInsets.symmetric(vertical: 20),
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      crossAxisCount: 3,
      childAspectRatio: 9 / 12,
      children: List.generate(12, (index) => _buildEachRelatedSeries()),
    );
  }

使用List.generate產生12個子項目

List.generate(12, (index) => _buildEachRelatedSeries()

每個子項目都是一個Container並用圖片做背景裝飾，導圓角

_buildEachRelatedSeries() {
  return Container(
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0),
        image: DecorationImage(
            image: AssetImage("assets/videolist/videolist${Random().nextInt(7)+1}.jpg"),fit: BoxFit.cover)),
  );
}

通知頁面

這一個比較簡單一點只是前面用到的Container，跟幾個Text用Column和Row排版

 _buildNewVideoNotification(String title,String subtitle) {
  return Row(
    children: [
      Container(
        margin: EdgeInsets.all(8.0),
        width: 120,
        height: 70,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8.0),

            image: DecorationImage(
                image: AssetImage(
                    "assets/videolist/videolist${Random().nextInt(7) +
                        1}.jpg"), fit: BoxFit.cover)),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("$title",style: TextStyle(fontSize: 16.0),),
            Text("$subtitle",style: TextStyle(color: Colors.grey,fontSize: 16.0),),
            Text("9月27日",style: TextStyle(color: Colors.grey,fontSize: 12.0))
          ],
        ),
      )
    ],
  );
}

用陰影做疊圖的效果

下面這段要做的是讓他看起來像幾個圖案疊在一起
所以我用BoxDecoration裡面的boxShadow，搭配margin以及縮小寬與高做到這個效果
boxShadow可以放數個BoxShadow，
設定Offset就會看到那個陰影，還可以更改color、blurRadius、spreadRadius，後面兩項跟模糊程度有關係

 boxShadow: [
                BoxShadow(color: Color(0xff444444), offset: Offset(16, 8)),
                BoxShadow(color: Color(0xff666666), offset: Offset(8, 4)),
              ],

設定好兩個陰影的顏色跟偏移就可以看到它了，再縮小一下尺寸，然後用margin填充空間，即可完成
Container可以設定margin與padding，不要搞錯兩者用途不同了，一個向外，一個向內

_buildManyVideosNotification(String title, String subtitle) {
  return Row(
    children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          margin: EdgeInsets.only(right: 16.0, bottom: 16.0),
          width: 104,
          height: 58,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.0),
              boxShadow: [
                BoxShadow(color: Color(0xff444444), offset: Offset(16, 8)),
                BoxShadow(color: Color(0xff666666), offset: Offset(8, 4)),
              ],
              image: DecorationImage(
                  image: AssetImage(
                      "assets/videolist/videolist${Random().nextInt(7) + 1}.jpg"),
                  fit: BoxFit.cover)),
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "$title",
              style: TextStyle(fontSize: 16.0),
            ),
            Text(
              "$subtitle",
              style: TextStyle(color: Colors.grey, fontSize: 16.0),
            ),
            Text("9月27日",
                style: TextStyle(color: Colors.grey, fontSize: 12.0))
          ],
        ),
      )
    ],
  );
}

今日完成之頁面如下

GitHub連結： flutter-netflix-clone